<template>
  <div>
    <h1>v-show</h1>
    <img v-show="isShow" src="https://img1.baidu.com/it/u=3153269620,2190738572&fm=253&fmt=auto&app=120&f=JPEG?w=581&h=500" alt="">
    <h1>v-if</h1>
    <img v-if="isShow"  src="https://img1.baidu.com/it/u=3153269620,2190738572&fm=253&fmt=auto&app=120&f=JPEG?w=581&h=500" alt="">
    <button @click="isShow=!isShow">切换显示</button>
    <h1 @click="age++">{{ age }}</h1>
    <h1 v-if="age<18">偷偷去网吧</h1>
    <h1 v-else-if="age>=18&&age<25">光明正大去网吧</h1>
    <h1 v-else>住网吧</h1>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const isShow=ref(true)
const age=ref(13)
</script>
<style scoped>
div img{
  width: 300px;
  height: 300px;
}
</style>